<template>
  <div class="page bg-current">
    <template>
  
</template>

    <el-container id="box">
      <el-header id="header">
        <span>遥感图像增强项目</span>
        <UserInfo></UserInfo>
      </el-header>
      <el-main
        id="main"
        v-loading="loading"
        :element-loading-svg="svg"
        class="custom-loading-svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(22, 22, 22, 0.8)"
        element-loading-text="加载中..."
      >
        <el-row justify="space-around">
          <el-col :span="5" v-for="data in menuData" :key="data.id">
            <div
              class="option-box shadow-xl transition-transform duration-300"
              :class="{ animate__animated: !loadDone, animate__zoomInDown: !loadDone }"
              @mouseenter="scaleBox($event)"
              @mouseleave="unscaleBox($event)"
              @click="redirectTo(data.path)"
            >
              <el-header class="option-header shadow-2xl">
                <span>{{ data.name }}</span>
              </el-header>
              <el-main class="option-main">
                <span class="overflow-auto break-normal">{{ data.description }}</span>
              </el-main>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { mainMenu } from "@/api/menu"
import { ref, onMounted } from "vue"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"

const router = useRouter()

const loading = ref<boolean>(true)

const loadDone = ref<boolean>(false)

let menuData = ref<any[]>()

function scaleBox(event: Event) {
  let classList = (event.target as HTMLInputElement).classList

  classList.add("scaled")
}

function unscaleBox(event: Event) {
  let classList = (event.target as HTMLInputElement).classList
  classList.remove("scaled")
}

function redirectTo(to: string) {
  router.push(to)
}

onMounted(() => {
  setTimeout(async () => {
    let res: any
    try {
      res = await mainMenu()
    } catch (error) {
      console.error(error)
      ElMessage.error("网络请求错误，请稍后再试")
      loading.value = false
      return
    }
    menuData.value = res.data
    loading.value = false
    setTimeout(() => {
      loadDone.value = true
    }, 1000)
  })
})

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
</script>

<style lang="scss" scoped>
.option-box {
  position: relative;
  top: 100px;
  height: 450px;
  width: 350px;
  background-color: #3c5eff;
  background-image: linear-gradient(225deg, #3c5eff 0%, #784ba0 10%, #1b547c 100%);
  z-index: 999;
  cursor: pointer;
  .option-header {
    height: 40%;
    span {
      user-select: none;
      line-height: 180px;
      color: var(--color-gray-300);
      font-size: 50px;
      font-family: "楷体";
    }
  }

  .option-main {
    height: 60%;
    text-align: left;
    span {
      user-select: none;
      color: var(--color-gray-300);
      font-size: large;
      font-family: "楷体";
    }
  }
}
.page {
  height: 100%;
  width: 100%;
}
#box {
  height: 100vh;
}
#header {
  text-align: center;
  height: 60px;
  box-shadow: var(--shadow-xl);
  > span {
    color: gray;
    font-size: 30px;
    line-height: 60px;
    position: relative;
    left: 115px;
    user-select: none;
  }
}
#main {
  text-align: center;
  .scaled {
    transform: scale(1.2);
  }
}
</style>
